
<template>
  <div class="app-container">
    <div class="title">
      <div class="left"><span class="circle"></span>质量验收记录</div>
      <div class="right">
      </div>

    </div>
    <div class="context-warp" style=" overflow: hidden;">
      <div class="page-form-item page-form-item2">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">项目名称</span>
        </label>
        <div class="page-form-item-content">
          {{projectName}}
        </div>
      </div>

      <div class="page-form-item page-form-item2">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">合同名称</span>
        </label>
        <div class="page-form-item-content">
          {{contractTitle}}
        </div>
      </div>
    </div>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="反馈人" prop="createName" align="center"/>
      <el-table-column label="反馈时间" prop="createTime" align="center"/>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-show="scope.row.bpmInfo.status == '' || scope.row.bpmInfo.status == 'save' || scope.row.bpmInfo.status == null ">保存</span>
          <span v-show="scope.row.bpmInfo.status == 'active'">审批中</span>
          <span v-show="scope.row.bpmInfo.status == 'completed'">审批完成</span>
          <span v-show="scope.row.bpmInfo.status == 'cancel'">作废、取消、删除</span>
          <span v-show="scope.row.bpmInfo.status == 'reject'">退回、驳回</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="200" >
        <template slot-scope="scope">

          <el-button
            v-show="scope.row.status == '' || scope.row.status == 'save' || scope.row.status == null || scope.row.status == 'reject'"
            size="mini"
            type="text"
            icon="el-icon-s-order"
            @click="handleRemoveClick(scope.row.id)"
          >删除</el-button>

          <el-button
            v-show="scope.row.status == '' || scope.row.status == 'save' || scope.row.status == null || scope.row.status == 'reject'"
            size="mini"
            type="text"
            icon="el-icon-s-order"
            @click="handleClick(scope.row.id,'change',scope.row.instId)"
          >编辑</el-button>


          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-order"
            @click="handleClick(scope.row.id,'look')"
          >查看</el-button>

          <el-button
            v-show="scope.row.instId"
            size="mini"
            type="text"
            icon="el-icon-s-order"
            @click="newWindowBpm(scope.row.instId,'1')"
          >审批流程</el-button>

        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      title="查看验收"
      :visible.sync="dialogVisible"
      width="800">

      <div class="title">
        <div class="left"><span class="circle"></span>进度节点</div>
        <div class="right">
          <el-button
            v-show="loadingType == 'change' "
            size="mini"
            type="primary"
            @click="handelSubFn"
          >提交</el-button>
        </div>
      </div>
      <el-table :data="loadingPage.contractProgressNodeLogList" border size="mini" row-key="id">
        <el-table-column label="场区" prop="areaDictName" align="center"/>
        <el-table-column label="节点名称" prop="nodeName" align="center"/>
        <el-table-column label="改造事项" prop="nodeRemark" align="center"/>
        <!-- <el-table-column label="备注" prop="remark" align="center"/> -->
        <el-table-column label="备注" align="center" width="200"  >
          <template slot-scope="scope">
            <el-input size="small" maxlength="250" v-model="scope.row.remark" :disabled=" loadingType == 'look' "  placeholder="请输入完成情况"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="附件" align="center" fixed="right" width="300"  >
          <template slot-scope="scope">
            <div :style="{marginTop: loadingType == 'look' ?'-30px' :'0' }">
              <FileUpload v-model='scope.row.fileList' :limit="3" :disabled=" loadingType == 'look' " />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'
import {listFeedBackLog, getQualityLogDetail,qualityLogSub,qualityLogRemove} from "@/api/progressManagement/quality";
import { roleOption } from "@/api/auth/role";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/auth/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import BaseIndex from '@/views/base/BaseIndex'
import FileUpload from '@/views/components/fileUpload/index.vue'
import { newWindowBpm } from "@/utils/openBpm";
import loadingSearchFormCompany from '@/views/components/loadingSearchFormCompany/index.vue'
import loadingSearchFormPerson from '@/views/components/loadingSearchFormPerson/index.vue'
export default {
  name: "qualityLog",
  components: { Treeselect , FileUpload ,loadingSearchFormCompany,loadingSearchFormPerson },
  extends: BaseIndex,
  data() {
    return {
      newWindowBpm,
      dialogVisible:false,
      isDisabled:false,
      contractId:'', // 合同Id
      projectName:'',
      contractTitle:'',
      loadingPage:{
        contractProgressNodeLogList:[],
      },
      loadingType:'',
      loadingId:'',
      loadingInstId:'',
    };
  },
  watch: {

  },
  created() {
    this.queryParams.progressId = this.$route.query.id
    this.getList();
    this.pageType = this.$route.query.type
    this.projectName = this.$route.query.projectName
    this.contractTitle = this.$route.query.contractTitle
    if(this.$route.query.type == 'add'){

    }

  },
  methods: {
    /** 查询列表 */
    getList() {
      this.$nextTick(()=>{
        this.loading = true;
        listFeedBackLog(this.queryParams).then(
          response => {
            if(response && response.code ===0){
              this.list = response.data.records
              this.total = response.data.total
            }else{
              this.msgError(response.msg)
            }
            this.loading = false;
          }
        ).catch(err=>{
          this.loading = false;
        });
      })
    },

    handleRemoveClick(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        qualityLogRemove(id).then(
          response => {
            if(response && response.code ===0){
              this.msgSuccess("成功");
              this.$router.go(-1)
            }else{
              this.msgError(response.msg)
            }
            this.loading = false;
          }
        );
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });




    },

    handelSubFn(){
      var data = {
        id:this.loadingId,
        instId:this.loadingInstId,
        contractQualityLogList:this.loadingPage.contractProgressNodeLogList
      }

      qualityLogSub(data).then(
        response => {
          if(response && response.code ===0){
            this.msgSuccess("成功");
            newWindowBpm(response.data.instId)
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      );
    },
    handleClick(id,type,instId){
      this.loadingType = type
      this.loadingId = id
      this.loadingInstId = instId

      this.dialogVisible = true;

      this.loadingPage = {
        contractProgressNodeLogList:[],
      }

      getQualityLogDetail(id).then(
        response => {
          if(response && response.code ===0){
            this.loadingPage.contractProgressNodeLogList = response.data
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      );
    }

  }
};
</script>
<style scoped  lang="scss">
.title {
  display: flex;
  justify-content: space-between;
  padding: 0 0.9375rem 0.9375rem 0.9375rem;
  // padding: 0 0.9375rem 0 0.9375rem;
  background-color: white;
  // border-bottom: 2px solid #ccc ;
  .circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background-color: #4A75D0;
    margin-right: 10px;
  }
}

.context-warp {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  margin: 15px;
  border-bottom: 1px solid #ebeef3;
  border-right: 1px solid #ebeef3;
  background-color: white;

  .page-form-item {
    width: 33.3%;
    font-size: 14px;
    font-family: "PingFangSC";
    position: relative;
    border-top: 1px solid #ebeef3;
    vertical-align: top;
    height: 66px;
    color: #4d4d4d;
    display: flex;

    .page-form-item-label {
      width: 120px;
      height: 100%;

      .icon {
        color: red;
      }
    }

    .left-border {
      position: absolute;
      height: 100%;
      width: 1px;
      left: 0;
      top: 0;
      background-color: #ebeef3;
      z-index: 999;
    }

    &-label {
      display: inline-block;
      height: calc(100% - 16px);
      background-color: #f9fafd;
      border-right: 1px solid #ebeef3;
      border-left: 1px solid #ebeef3;
      text-align: center;

      .require {
        display: inline-block;
        width: 8px;
        color: #f56c6c;
        vertical-align: -3px;
      }

      &__text {
        display: inline-block;
        vertical-align: middle;
        line-height: 1.3em;
        width: 80%;
      }

      &::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }
    }

    .border-right0 {
      border-right: 0;
    }

    &-content {
      display: inline-block;
      vertical-align: top;
      padding: 8px;
      height: calc(100% - 16px);

      &.noLabel {
        border-left: 1px solid #ebeef3;
      }

      &::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }

      &.align-top {
        &::after {
          content: "";
          vertical-align: top;
        }
      }

      &.noPadding {
        padding: 0;
      }
    }

    .el-table th {
      background-color: #f9fafd;
    }

    .el-radio {
      margin-right: 15px;
    }

    .el-radio__label {
      font-size: 12px;
    }

    .el-input--small .el-input__inner {
      font-size: 12px;
    }

    .el-checkbox {
      font-size: 12px;
    }

    .el-checkbox__label {
      font-size: 12px;
      vertical-align: -2px;
    }

    .el-select {
      width: 100%;
    }

    .el-cascader {
      width: 100%;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 100%;
    }

    .el-textarea__inner {
      height: 80px;
    }
    .page-form-item-content {
      height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      .text-box {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        cursor: pointer;
      }

      .slider-box {
        display: flex;
        justify-content: space-between;

        &:first-child {
          flex: 1;
        }
      }
    }
  }

  .page-form-item2{
    width: 50%;
  }
  .page-form-item3{
    width: 100%;
  }
  .page-form-item4{
    width: 25%;
  }
}
</style>
